<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <style>
        body {
            margin: 30px;
        }
    </style>
    <script src='./vue.global.js'></script>
    <script src='./gsap.min.js'></script>
</head>

<body>
    <div id="app">
        <input v-model.number="firstNumber" type="number" step="20"> +
        <input v-model.number="secondNumber" type="number" step="20"> =
        {{ result }}
        <p>
            <animated-integer :value="firstNumber"></animated-integer> +
            <animated-integer :value="secondNumber"></animated-integer> =
            <animated-integer :value="result"></animated-integer>
        </p>
    </div>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    firstNumber: 20,
                    secondNumber: 40
                }
            },
            computed: {
                result() {
                    return this.firstNumber + this.secondNumber
                }
            }
        })

        app.component('animated-integer', {
            template: '<span>{{ fullValue }}</span>',
            props: {
                value: {
                    type: Number,
                    required: true
                }
            },
            data() {
                return {
                    tweeningValue: 0
                }
            },
            computed: {
                fullValue() {
                    return Math.floor(this.tweeningValue)
                }
            },
            methods: {
                tween(newValue, oldValue) {
                    gsap.to(this.$data, {
                        duration: 0.5,
                        tweeningValue: newValue,
                        ease: 'sine'
                    });
                }
            },
            watch: {
                value(newValue, oldValue) {
                    this.tween(newValue, oldValue)
                }
            },
            mounted() {
                this.tween(this.value, 0)
            },
        })

        app.mount('#app')
    </script>
</body>

</html>